import {Component, ComponentProps, VueComponent, Mut} from "vue3-oop";
import {NForm, NFormItemGi, NGrid, NInput, NSwitch, NSelect} from "naive-ui";
import BpmnModeler from '../../../../../BpmnModeler';

interface IProps {
  bpmnModeler: BpmnModeler,
}
@Component()
export default class ConfigProcessPanel extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    bpmnModeler: {},
  }

  public static tabKey = "Process";
  public static tabName = "流程配置";

  private updateId = (value:string):void=>{this.props.bpmnModeler.processProps.id = value;}
  private updateName = (value:string):void=>{this.props.bpmnModeler.processProps.name = value;}
  private updateIsExecutable = (value:string):void=>{this.props.bpmnModeler.processProps.isExecutable = value==='true';}
  private updateStarterUsers = (value:string):void=>{this.props.bpmnModeler.processProps.candidateStarterUsers = value;}
  private updateStarterGroups = (value:string):void=>{this.props.bpmnModeler.processProps.candidateStarterGroups = value;}
  private updateDocumentation = (value:string):void=>{this.props.bpmnModeler.processProps.documentation = value;}
  private updateIsEagerExecutionFetching = (value:string):void=>{this.props.bpmnModeler.processProps.isEagerExecutionFetching = value;}

  render(){
    return(
      <NForm labelPlacement="left" labelWidth={100}>
        <NGrid cols={2} xGap={20}>
          <NFormItemGi label="流程ID"><NInput value={this.props.bpmnModeler.processProps.id} onUpdateValue={this.updateId} /></NFormItemGi>
          <NFormItemGi label="流程名称"><NInput value={this.props.bpmnModeler.processProps.name} onUpdateValue={this.updateName} /></NFormItemGi>
          <NFormItemGi label="描述文档"><NInput value={this.props.bpmnModeler.processProps.documentation} onUpdateValue={this.updateDocumentation} /></NFormItemGi>
          <NFormItemGi label="可执行"><NSwitch value={this.props.bpmnModeler.processProps.isExecutable} onUpdateValue={this.updateIsExecutable} /></NFormItemGi>
          <NFormItemGi label="流程启动者"><NInput value={this.props.bpmnModeler.processProps.candidateStarterUsers} onUpdateValue={this.updateStarterUsers} /></NFormItemGi>
          <NFormItemGi label="流程启动者组"><NInput value={this.props.bpmnModeler.processProps.candidateStarterGroups} onUpdateValue={this.updateStarterGroups} /></NFormItemGi>
          <NFormItemGi label="即时执行抓取"><NSelect options={[{value:'true',label:'是'},{value:'false',label:'否'}]} value={this.props.bpmnModeler.processProps.isEagerExecutionFetching} onUpdateValue={this.updateIsEagerExecutionFetching} /></NFormItemGi>
        </NGrid>
      </NForm>
    )
  }
}